<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>getOut</title>
        <link href="../css/style.css" rel="stylesheet" type="text/css" />
        <link href="../css/spot.css" rel="stylesheet" type="text/css" />
        <link href="../css/form.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="../lib/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="../lib/knockout-2.0.0.js"></script>
        <script type="text/javascript" src="../js/login_functions.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
    </head>
    <body>
        <div class="rapidxwpr floatholder">
            <?php $activePage="none";  include_once "Header.php"; ?>
            <div id="middle">
                <div id="loading" class="hide left">
                    <img id="loading" src="../images/loading.gif" />
                    Loading details...
                </div>
                <div style="clear:both"/>
                <div id="container" style="width:350px;float:left;" >
                    <form>

                        <header id="header" class="info">
                            <h2 data-bind="text: NAME"></h2>
                        </header>
                        <ul>
                            <li>
                                <label class="desc">
                                    Address 
                                    <img id="loading" class="hide" src="../images/loading.gif">
                                </label>
                                <div>
                                    <span class="addr1">
                                        <input name="address" type="text" class="field text addr large" disabled="true" data-bind="value: STREET_ADDRESS"/>
                                        <label>Street Address</label>
                                        </br>
                                    </span></br>
                                </div>
                                <span class="city">
                                    <input name="city" type="text" class="field text addr" disabled="true" data-bind="value: CITY"/>
                                    <label>City</label>
                                </span>
                                <span class="state">
                                    <input name="state" type="text" maxlength="2" class="field text addr small" disabled="true" data-bind="value: STATE">
                                        <label>State</label>
                                </span>
                                <span class="zip">
                                    <input name="zip" type="text" class="field text addr medsmall" maxlength="5" disabled="true" data-bind="value: ZIP"/>
                                    <label>Zip Code
                                    </label>
                                </span>
                            </li>
                            <li>
                                <label class="desc">
                                    Location
                                </label>
                                <div id="latlon">
                                    <span>
                                        <input disabled="true" data-bind="value: LAT"/>
                                        <label>Latitude</label>
                                    </span>
                                    <span>
                                        <input disabled="true" data-bind="value: LON"/>
                                        <label>Longitude</label>
                                    </span>
                                </div>
                            </li>
                        </ul>
                    </form>
                </div>
                <div id="spot-detail-map"></div>
                <div style="clear:both"/>

                <h2>Top Events</h2>

                <table id="editTable">
                    <thead>
                        <tr>
                            <th>
                                <a href="#">Details</a>
                            </th>
                            <th>
                                <a href="#">Time</a>
                            </th>
                            <th>
                                <a href="#">Skill</a>
                            </th>
                            <th>
                                <a href="#">Rating</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: topEvents">
                        <tr>
                            <td><a data-bind="attr: { href: DetailsLink}">Details</a></td>
                            <td data-bind="text: DATE"></td>
                            <td data-bind="text: SKILL"></td>
                            <td data-bind="text: RATING"></td>
                        </tr>     
                    </tbody>

                </table>

                <h2>Top Activities</h2>

                <table id="editTable">
                    <thead>
                        <tr>
                            <th>
                                <a href="#">Name</a>
                            </th>
                            <th>
                                <a href="#">Average Rating</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: topActivities">
                        <tr>
                            <td align="center" data-bind="text: NAME"></td>
                            <td align="center" data-bind="text: AVGRATING"></td>
                        </tr>     
                    </tbody>
                </table>

                <h2>Recent Feedback</h2>

                <table id="editTable">
                    <thead>
                        <tr>
                            <th>
                                <a href="#">Date</a>
                            </th>
                            <th>
                                <a href="#">Name</a>
                            </th>
                            <th>
                                <a href="#">Comment</a>
                            </th>
                            <th>
                                <a href="#">Rating</a>
                            </th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: feedbacks">
                        <tr>
                            <td align="center" data-bind="text: CREATED_ON"></td>
                            <td align="center" data-bind="text: NAME"></td>
                            <td data-bind="text: COMMENT"></td>
                            <td data-bind="text: RATING"></td>
                        </tr>     
                    </tbody>
                </table>

                <script type="text/javascript" src="../ViewModel/SpotDetailViewModel.js"></script>
            </div>
        </div>

        <div class="rapidxwpr floatholder">
            <div id="footer" class="clearingfix">
                <ul class="footermenu">
                    <li><a href="#">Events</a></li>
                    <li><a href="#">Spots</a></li>
                    <li><a href="#">Activities</a></li>
                    <li><a href="#">About</a></li>
                </ul>
            </div>
        </div>				
    </body>
</html>
